<template>
  <!-- <el-alert :closable="false">
      <router-view />
  </el-alert>-->
  <div style="padding:30px;width:60%">
    <el-form
      :rules="rules"
      ref="ruleForm"
      label-width="115px"
      class="demo-xiangmuForm"
      :model="ruleForm"
      v-loading="loading"
    >
      <!-- 可删除 -->
      <el-form-item label="分公司" prop="uid">
        <el-select v-model="ruleForm.uid" placeholder="请选择分子公司" @change="findBumen()">
          <el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <!-- <div> {{ruleForm.cid}}</div> -->
      <el-form-item label="部门" prop="did">
        <el-select
          v-model="ruleForm.did"
          :disabled="dis"
          placeholder="请选择部门"
          @change="findPerson()"
        >
          <el-option v-for="item in options2" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="人员" prop="proPrincipal">
        <el-select :disabled="dis2" v-model="ruleForm.proPrincipal" filterable placeholder="请选择人员">
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 缺一个所属合同 -->
      <!-- prop="conNumber" -->
      <!-- 缺接口参数 -->
      <el-form-item label="所属合同">
        <el-select v-model="ruleForm.contractId" filterable placeholder="请选择合同">
          <el-option
            v-for="item in optionshetong"
            :key="item.id"
            :label="item.conText"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="合同参与人员" prop="partier">
        <el-col :span="16">
          <el-select
            style="width:100% ;"
            multiple
            filterable
            v-model="ruleForm.partier"
            placeholder="请选择参与人员"
          >
            <el-option
              v-for="item in options11"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <!-- 相关人员 -->
      <el-form-item label="项目金额" prop="proMoney">
        <el-col :span="16">
          <el-input-number
            type="number"
            v-model="ruleForm.proMoney"
            :precision="2"
            :step="0.1"
            :min="0"
          ></el-input-number>&emsp;¥
        </el-col>
      </el-form-item>
      <el-form-item label="项目名称" prop="proName">
        <el-col :span="16">
          <el-input type="string" v-model="ruleForm.proName"></el-input>
        </el-col>
      </el-form-item>
      <!-- 写死的5个项目类型 -->
      <!-- prop="proType" -->
      <el-form-item label="项目类型" prop="proType">
        <el-select v-model="ruleForm.proType" placeholder="请选择项目类型">
          <el-option
            type="string"
            v-for="item in xiangmuleixing"
            :key="item.label"
            :label="item.value"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item>

      <!-- <el-form-item label="提成比例(%)" prop="ratio">
        <el-col :span="16">
          <el-input type="number" v-model="ruleForm.ratio"></el-input>
        </el-col>
      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即添加</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { hqfgs, tjht } from "@/api/ht";
import { getToken, gettype, getid } from "@/utils/auth";
import { tjgs } from "@/api/zuzhijiagou";
import axios from "axios";
import request from "@/utils/request";
export default {
  data() {
    return {
      pageIndex: 1,
      dis: true,
      dis2:true,
      options11: [],
      value11: "",
      loading: false,
      // 上面可涮出

      // 三个选择框 初始化
      value1: null,
      options1: [],
      value2: null,
      options2: [],
      value3: null,
      options3: [],
      optionshetong: "",

      // 写死的5个项目类型选择的获取数据接受
      xiangmnutype: "",

      // xiangmuleixing 源数据
      xiangmuleixing: [
        {
          label: 1,
          value: "安全评价"
        },
        {
          label: 2,
          value: "职卫评价"
        },
        {
          label: 3,
          value: "安全咨询"
        },
        {
          label: 4,
          value: "安全检查"
        },
        {
          label: 5,
          value: "检测检验"
        }
      ],
      // 5个类型绑定数据
      xiangmnutype1: "",

      formdata: "",
      // tianjiadeliebiao: "",

      // 校验的table表格
      ruleForm: {
        uid: "",
        did: "",
        proPrincipal: "",
        proName: "",
        conNumber: "",
        proType: "",
        proMoney: "",
        partier: ""
        // ratio: null
      },
      rules: {
        uid: [
          {
            required: true,
            message: "请选择分公司",
            trigger: "blur"
          }
        ],
        cid: [{ required: true, message: "请选择部门", trigger: "blur" }],
        proPrincipal: [
          { required: true, message: "请选择人员", trigger: "blur" }
        ],
        conNumber: [
          { required: true, message: "请选择所属合同", trigger: "blur" }
        ],
        partier: [
          { required: true, message: "请选择参与人员，可多选", trigger: "blur" }
        ],
        proName: [
          { required: true, message: "请输入项目名称", trigger: "blur" }
        ],
        proType: [
          { required: true, message: "请选择项目类型", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.findInfo();
  },
  methods: {
    suoshuhetong() {
      var self = this;
      request("/contract/selectComBox", {
        method: "get",
        headers: {
          "Content-Type": "application/json"
        }
        // params: resdata
      }).then(function(response) {
        console.log("所属合同的信息response");
        console.log(response.data.object);
        self.optionshetong = response.data.object;
        // ruleForm.contractId
        self.loading = false;
      });
    },
    findInfo() {
      let self = this;
      this.loading = true;
      request("/person/rolelist", {
        method: "get",
        headers: {
          "Content-Type": "application/json"
        }
      }).then(function(response) {
        self.info = response.data.object;
        console.log("info:", self.info);
        self.findCompnany();
        self.suoshuhetong();
      });
    },
    findCompnany() {
      let self = this;
      var resdata = {
        page: this.pageIndex,
        pageSize: 1000
      };
      request("/branch/select", {
        method: "get",
        headers: {
          "Content-Type": "application/json"
        },
        params: resdata
      }).then(function(response) {
        self.options1 = response.data.object;
        // console.log(response.options1);
      });
    },
    findBumen() {
      // console.log(this.ruleForm);
      this.options2 = "";
      this.value2 = "";
      this.options3 = "";
      this.value3 = "";
      let self = this;
      var resdata = {
        bid: this.value1,
        page: this.pageIndex,
        pageSize: 1000
      };
      request("/department/selectComboBox", {
        method: "get",
        headers: {
          "Content-Type": "application/json"
        },
        params: resdata
      }).then(function(response) {
        self.options2 = response.data.object;

        console.log("response", response);
        self.dis = false;
        console.log("self.dis1:", self.dis);
      });
    },
    findPerson(query) {
      this.options3 = "";
      this.value3 = "";
      let self = this;
      var resdata = {
        pid: this.value2,
        name: query
      };
      request("/person/selectComboBox", {
        method: "get",
        headers: {
          "Content-Type": "application/json"
        },
        params: resdata
      })
        .then(function(response) {
          let list = response.data.object.map(item => {
            return { value: `${item.id}`, label: `${item.name}` };
          });
          self.options3 = list;
          console.log("self.options3");
          console.log(self.options3);

          self.options11 = list;
          console.log("response:", response);
          self.dis2 = false;
          console.log("self.dis2:", self.dis);
          self.loading = false;
        })
        .catch(e => {});
    },

    submitForm(formName) {
      var that = this;
      this.loading = true;
      var formdata = that.ruleForm;
      formdata.proPrincipal = parseInt(formdata.proPrincipal);
      formdata.conNumber = formdata.conNumber.toString();

      formdata.proType = formdata.proType.toString();
      formdata.partier = formdata.partier.join("&");
      console.log("formdata");
      console.log(formdata);
      this.$refs[formName].validate(valid => {
        if (valid) {
          // var that1 =that ;
          // 添加公司的方法
          request(`/item/add`, {
            method: "post",
            headers: {
              "Content-Type": "application/json"
            },
            data: formdata
          })
            .then(res => {
              console.log(res);
              this.loading = false;
              that.$message.success("添加成功");
              // that1.resetForm(formName);
            })
            .catch(e => {
              console.log(e);
            });
        } else {
          console.log("error submit!!");
          that.$message.error("请填写正确的信息");
          return false;
        }
      });
    },

    resetForm(formName) {
      // this.ruleForm.uid = null;
      // this.ruleForm.cid = null;
      // this.ruleForm.proPrincipal= null;
      // this.ruleForm.proType= null;
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style scoped>
.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}
/* .el-alert__content {
  width: 300px;
} */
</style>

<style scoped>
.icon-star {
  margin-right: 2px;
}
.el-alert__content {
  width: 50%;
}
.drag-handler {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d {
  margin-top: 15px;
}
/* .el-alert__content {
  width: 300px;
} */
</style>
